<template>
  <div class="top">
    <el-row :gutter="20" type="flex" justify="space-between">
      <el-col :span="6">
        <span class="hint">说明：目前支持学科和关键字条件筛选</span>
      </el-col>
      <el-col :span="6">
        <el-row type="flex" justify="end">
          <el-button type="success" size="small" @click="$router.push(`/questions/new`)">
            <i class="el-icon-edit"></i>
            新增试题</el-button
          >
        </el-row>
      </el-col>
    </el-row>
    <!-- 表单 -->
    <el-form>
      <el-row :gutter="24" type="flex" class="row-bg">
        <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="学科">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="二级目录">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="标签">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" type="text">
          <el-form-item label-width="80px" label="题目备注">
            <el-input size="small" placeholder="根据题干搜索"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex" class="row-bg">
      <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="试题类型">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"

            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="难度">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="方向">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"

            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" type='text'>
          <el-form-item label-width="80px" label="录入人">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="small"

            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex" class="row-bg">
        <el-col :span="6" type="text">
          <el-form-item label-width="80px" label="题目备注">
            <el-input size="small"></el-input>
          </el-form-item>
        </el-col>
       <el-col :span="6" type="text">
          <el-form-item label-width="80px" label="企业简称">
            <el-input size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6" size="small">
          <el-form-item label-width="80px" label="城市">
            <el-select
            style="width: 48%;display:inline-block "
              v-model="value1"
              multiple
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="value2"
              multiple
              collapse-tags
              style=" width: 48%; float:right;"
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" size="small">
          <el-row type="flex" justify="end">
            <el-button size="mini">清除</el-button>
            <el-button type="primary" size="mini">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>

export default {
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      value1: [],
      value2: []
    }
  }
}
</script>

<style lang='less' scoped>

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.el-form .row-bg{
  background-color: #fff;
}

.row-bg {
  // padding: 10px 0;
  margin: 0;
  height: 51px;
}
.hint {
  font-size: 12px;
  color: pink;
}
.top {
  margin-bottom: 15px;
}
// .el_input_w {
//   width: 75%;
// }
// .el-form-item__label {
//   width: 80px;
// }
.el-select{
  display: block;
}
</style>
